<template>
  <div>
    <h1>虚拟长列表</h1>

    <RecycleScroller class="box" :items="list" :item-size="36" key-field="id">
      <template v-slot:default="{ item }">
        <div class="item">{{ item.text }}</div>
      </template>
    </RecycleScroller>
  </div>
</template>

<script lang="ts" setup>
import RecycleScroller from '@/components/recycle-scroller/index.vue'

const list = Array(10000)
  .fill('')
  .map((item, index) => ({
    id: index + 1,
    text: `text_${index + 1}`
  }))
</script>

<style lang="scss" scoped>
.box {
  height: 500px;
  border: 1px solid #000;
  overflow-y: auto;
}

.item {
  height: 36px;
  line-height: 36px;
  padding-left: 16px;
}
</style>
